<template>
  <el-dialog :visible.sync="currentShowFlag" append-to-body fullscreen :close-on-click-modal="false" :close-on-press-escape="false" @open="handleDialogOpen" @closed="handleDialogClosed">
    <div slot="title" class="detail-dialog__header">{{$t('system_user.detailDialog')}}</div>
    <div>
      <simple-form ref="form" v-model="formModel" label-width="80px" :form-field="formField" :grid="{xs: 12, sm: 12, md: 8}" :view-flag="viewFlag"></simple-form>
    </div>
    <div slot="footer">
      <el-button @click="handleDialogClose">{{viewFlag ? $t('operation.close') : $t('operation.cancel')}}</el-button>
      <el-button type="primary" @click="handleDataSubmit" v-if="!viewFlag">{{$t('operation.submit')}}</el-button>
    </div>
  </el-dialog>
</template>
<script>
const BASEURL = {
  update: '/api/system/user/update',
  get: '/api/system/user/get',
  save: '/api/system/user/save',

  office: '/api/system/office/list',
  role: '/api/system/role/list'
}
export default {
  name: 'user-management_detail',
  data () {
    return {
      formModel: { company: {}, status: 'Y', roleList: [] },

      companyList: [],
      companyLoadingFlag: false,

      sysRoleList: []
    }
  },
  inject: ['handleDataSearch'],
  computed: {
    currentShowFlag: {
      get () { return this.showFlag },
      set (val) { this.$emit('update:showFlag', val) }
    },

    status () { return this.$getDictList('data_status') },

    formField () {
      return [
        {
          prop: 'company',
          label: this.$t('system_user.companyName'),
          type: 'SearchableInput',
          component: {
            remoteMethod: this.getCompanyList,
            loading: this.companyLoadingFlag,
            optionList: this.companyList,
            valueKey: 'id'
          },
          event: {
            focus: () => {
              this.getCompanyList()
            }
          },
          rules: {
            type: 'object',
            trigger: 'change',
            message: this.$t('validate.notSelect'),
            required: true,
            fields: {
              id: { type: 'string', message: this.$t('validate.notSelect'), required: true }
            }
          }
        },
        // {
        //   prop: 'dept',
        //   label: this.$t('system_user.deptName'),
        //   type: 'SearchableInput',
        //   component: {
        //     clearable: true,
        //     remoteMethod: this.getDeptList,
        //     loading: this.deptLoadingFlag,
        //     optionList: this.deptList,
        //     valueKey: 'id'
        //   },
        //   event: {
        //     focus: () => {
        //       this.getDeptList()
        //     },
        //     clear: () => {
        //       delete this.formModel.dept
        //     }
        //   }
        // },
        {
          prop: 'loginName',
          label: this.$t('system_user.loginName'),
          type: 'Input',
          rules: { trigger: 'blur', message: this.$t('validate.notBlank'), required: true }
        },
        {
          prop: 'newPassword',
          label: this.$t('system_user.password'),
          type: 'Input',
          component: { placeholder: this.$t('tip.defaultPassword') },
          hidden: this.viewFlag
        },
        {
          prop: 'name',
          label: this.$t('system_user.name'),
          type: 'Input',
          rules: { trigger: 'blur', message: this.$t('validate.notBlank'), required: true }
        },
        {
          prop: 'roleList',
          label: this.$t('system_user.roleList'),
          type: 'Select',
          component: {
            optionList: this.sysRoleList,
            multiple: true,
            valueKey: 'id'
          }
          // rules: {
          //   type: 'array',
          //   trigger: 'change',
          //   message: this.$t('validate.notSelect'),
          //   required: true
          // }
        },
        {
          prop: 'phone',
          label: this.$t('system_user.phone'),
          type: 'Input'
          // rules: { trigger: 'blur', message: this.$t('validate.notBlank'), required: true }
        },
        {
          prop: 'status',
          label: this.$t('system_user.status'),
          type: 'Select',
          component: { optionList: this.status },
          rules: { trigger: 'blur', message: this.$t('validate.notBlank'), required: true }
        },
        {
          prop: 'remarks',
          label: this.$t('system_user.remarks'),
          type: 'Input',
          component: { type: 'textarea' },
          col: { xs: 24, sm: 24, md: 24 }
        }
      ]
    }
  },
  props: {
    showFlag: { type: Boolean, default: false },
    viewFlag: { type: Boolean },
    detailData: { type: Object }
  },
  methods: {
    handleDialogClose () {
      this.currentShowFlag = false
    },

    getCompanyList (name) {
      this.companyLoadingFlag = true
      this.$axios.post(BASEURL.office, { pageSize: 20, name: name })
        .then(resp => {
          let respData = resp.data
          this.companyList = respData.list.map(item => { return { key: item.id, value: item, label: item.name } })
        })
        .finally(() => { this.companyLoadingFlag = false })
    },

    getSysRoleList () {
      this.$axios.post(BASEURL.role, {})
        .then(resp => {
          let respData = resp.data
          this.sysRoleList = respData.list.map(item => { return { key: item.id, value: item, label: item.name } })
        })
    },

    handleDataSubmit () {
      this.$refs.form.$refs.simpleForm.validate(status => {
        if (status) {
          let loadingFlag = this.$loading({ target: this.$el.querySelector('.el-dialog') })

          let submitModel = this.$_.cloneDeep(this.formModel)
          if (!this.detailData.id && !submitModel.newPassword) submitModel.newPassword = '123456'

          this.$axios
            .post(this.detailData.id ? BASEURL.update : BASEURL.save, submitModel)
            .then(resp => {
              this.currentShowFlag = false
              this.$message({ type: 'success', message: this.$t('tip.saveSuccess') })
              this.handleDataSearch()
            })
            .finally(() => {
              loadingFlag.close()
            })
        }
      })
    },

    handleDialogOpen () {
      if (!this.detailData.id) {
        this.getSysRoleList()
        return
      }
      let loadingFlag = this.$loading({ target: this.$el.querySelector('.el-dialog') })

      this.$axios
        .post(BASEURL.get, { id: this.detailData.id })
        .then(resp => {
          let respData = resp.data
          this.initialSelectOptionList(respData.company)
          // delete respData.password
          this.formModel = respData
        })
        .finally(() => {
          loadingFlag.close()
        })
    },

    initialSelectOptionList (company) {
      this.companyList = [{ key: company.id, value: company, label: company.name }]
      this.getSysRoleList()
    },

    handleDialogClosed () {
      this.$refs.form.resetFields()
      this.formModel = { company: {}, status: 'Y', roleList: [] }
    }
  }
}
</script>
